<!DOCTYPE html>
<html>
    <head>
        <title>多路视频直播</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            html, body {
                height: 100%;
                width: 100%;
                padding: 0;
                margin: 0;
            }
            .divbg{
                width:300px;
                height:200px;
            }
            .videostyle{
                min-height: 100%;
                min-width: 100%;
                max-height: 100%;
                max-width: 100%;
            }
        </style>
    </head>
    <body>
        <h2>rtsp流媒体</h2>
        <!-- 第一个rtsp视频流 -->
        <div class="divbg">
            <img  class="videostyle" src="{{ url_for('video1_feed') }}">
        </div>
        <br>
        <h2>rtmp流媒体</h2>
        <!-- 第一个rtmp视频流 -->
        <div class="divbg" style="float: left; margin-right: 5px;">
            <img class="videostyle" src="{{ url_for('video2_feed') }}">
        </div>
        <!-- 第二个rtmp视频流 -->
        <div class="divbg" style="float: left; margin-right: 5px;">
            <img  class="videostyle" src="{{ url_for('video3_feed') }}">
        </div>
        <!-- 第三个rtmp视频流 -->
        <div class="divbg" style="float: left;">
            <img class="videostyle" src="{{ url_for('video4_feed') }}">
        </div>
    </body>
</html>